<template>
	<view class="cart" v-if="carShops.length==0">
		<image src="../../static/cart-no.png"></image>
		<view class="cart-1">购物车还没有商品</view>
		<navigator url="../index/index" open-type="switchTab"><view class="cart-2">去逛逛</view></navigator>
	</view>
	<view v-else>
		<view class="car-3">
			<text class="car-3-text">共 {{carShops.length}} 件商品</text>
			<button class="btn" size="mini" @click="bh">{{aaa}}</button>
		</view>
		<view>
			<form class="car-com">
				<checkbox-group @change="htc">
					<view class="car-com-1" v-for="(carShop,index) in carShops">
						<checkbox :checked="carShop.ischecked" :value="index">
							<carCom :carShop="carShop"></carCom>
						</checkbox>
					</view>
				</checkbox-group>
			</form>
		</view>

		<view class="add" v-if="xz==1">
			<view class="car-di">
				<view class="all" :class="{'all-1':isall==1}" @click="isalls();addprice()"></view>
				<view style="margin-left: -100rpx;">全选</view>
				<view style="margin-left: -80rpx;">合计：<text style="color: red;">￥{{priceses}}</text></view>
				<navigator url="../xaidan/xaidan"><view class="btn2">去结算</view></navigator>
			</view>
		</view>

		<view class="add" v-else>
			<view class="car-di">
				<view class="all" :class="{'all-1':isall==1}" @click="isalls"></view>
				<view style="margin-left: -100rpx;">全选</view>
				<view class="btn2" @click="dels">删除</view>
			</view>
		</view>
	</view>
	<view class="recommond">
		<view class="recommond-f">为你推荐</view>
		<view class="list">
			<shop v-for="shop in shops" :shop="shop"></shop>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				isall: 0,
				xz: 1,
				priceses: 0,
				arr:[],
				aaa:'编辑',
				shops: [
					{
						id:1,
						title:"oppo find N3",
						text:"超轻薄折叠大屏",
						price:9999,
						src:"https://msecfs.opposhop.cn/commons-media-picture/GOODS/20231019/5ace9b5ef00dd3b2f8723576bec74d89-100029441.png?_w_=480&_h_=480&x-oss-process=image%2Fresize%2Cm_mfit%2Climit_1%2Cw_480%2Ch_480%2Fformat%2Cwebp",
					},
					{
						id:2,
						title:"oppo reno10",
						text:"120Hz OLED超清屏",
						price:1899,
						src:"https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230515/129e18c1ad8a057f429386b4e7221d94-447934141.png?_w_=320&_h_=320&x-oss-process=image%2Fformat%2Cwebp"
					},
					{
						id:3,
						title:"OPPO Watch 4 Pro 全智能手表",
						text:"+19.9元抢运动礼盒",
						price:2199,
						src:"https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230822/406fece74aaff40dc665b828437a0627-2127046384.png?_w_=480&_h_=480&x-oss-process=image%2Fresize%2Cm_mfit%2Climit_1%2Cw_480%2Ch_480%2Fformat%2Cwebp"
					},
					{
						id:4,
						title:"OPPO Reno10 Pro+",
						text:"100W超级闪充",
						price:3699,
						src:"https://msecfs.opposhop.cn/commons-media-picture/MEDIA/20230516/30d60d55fefb37dd21adb1422b19d2a22021193044.png?_w_=320&_h_=320&x-oss-process=image%2Fformat%2Cwebp"
					},
					{
						id:5,
						title:"OPPO Pad 2",
						text:"旗舰好屏",
						price:2399,
						src:"https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230515/5ace9b5ef00dd3b2f8723576bec74d89-1551110905.png?_w_=320&_h_=320&x-oss-process=image%2Fformat%2Cwebp"	
					}
				],
				carShops : []
			}
		},
		onReachBottom() {
			let data = [{
					id:3,
					title:"OPPO Watch 4 Pro 全智能手表",
					text:"+19.9元抢运动礼盒",
					price:2199,
					src:"https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230822/406fece74aaff40dc665b828437a0627-2127046384.png?_w_=480&_h_=480&x-oss-process=image%2Fresize%2Cm_mfit%2Climit_1%2Cw_480%2Ch_480%2Fformat%2Cwebp"
				},
				{
					id:4,
					title:"OPPO Reno10 Pro+",
					text:"100W超级闪充",
					price:3699,
					src:"https://msecfs.opposhop.cn/commons-media-picture/MEDIA/20230516/30d60d55fefb37dd21adb1422b19d2a22021193044.png?_w_=320&_h_=320&x-oss-process=image%2Fformat%2Cwebp"
				},
				{
					id:5,
					title:"OPPO Pad 2",
					text:"旗舰好屏",
					price:2399,
					src:"https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230515/5ace9b5ef00dd3b2f8723576bec74d89-1551110905.png?_w_=320&_h_=320&x-oss-process=image%2Fformat%2Cwebp"	
				}
			]
			this.shops = [...this.shops,...data];
			
		},
		onShow() {
			this.carShops = getApp().globalData.carshopss;
			this.$forceUpdate()
			console.log(this.carShops);
		},
		methods: {
			htc(e) {
				console.log(e)
				let j = e.detail.value;
				this.priceses = 0;
				console.log(j)
				for (let i = 0; i < this.carShops.length; i++) {
					this.carShops[i].ischecked = false;	
				}
				for(let i = 0;i<j.length;i++){
					this.carShops[j[i]].ischecked = true;
					this.priceses = this.priceses + this.carShops[j[i]].price * this.carShops[j[i]].conunt
				}
				let s = 0
				for (let i = 0; i < this.carShops.length; i++,s++) {
					if(!this.carShops[i].ischecked){
						break;
					}
				}
				if(s == this.carShops.length){
					this.isall = 1
				}else{
					this.isall = 0
				}
				getApp().globalData.carshopss = this.carShops;
				
			},
			addprice() {
				this.priceses = 0;
				for (let i = 0; i < this.carShops.length; i++) {
					if (this.carShops[i].ischecked) {
						this.priceses = this.priceses + this.carShops[i].price * this.carShops[i].conunt
					}
				}
			},
			isalls() {
				if (this.isall == 1) {
					this.isall = 0
					for (let i = 0; i < this.carShops.length; i++) {
						this.carShops[i].ischecked = false
					}
				} else {
					this.isall = 1
					for (let i = 0; i < this.carShops.length; i++) {
						this.carShops[i].ischecked = true
					}
				}
				getApp().globalData.carshopss = this.carShops;

			},
			dels(){
				let temp = [];
				for(let i = 0 ;i<this.carShops.length;i++){
					console.log(this.carShops[i].ischecked)
					if(!this.carShops[i].ischecked){
						temp.push(this.carShops[i]);
					}
				}
				getApp().globalData.carshopss = temp;
				this.carShops = temp
			},
			bh() {
				if (this.xz == 1){
					this.xz = 0;
					this.aaa = "完成"
				}else{
					this.xz = 1;
					this.aaa = "编辑"
				}	
			}
		}
	}
</script>

<style>
	body {
		background-color: #f8f8f8;
	}

	.cart {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 30rpx;
	}

	.cart-1 {
		padding-top: 10rpx;

	}

	.cart-2 {
		padding-top: 10rpx;
		color: red;
	}

	.cart image {
		max-width: 280rpx;
		max-height: 280rpx;
	}

	.recommond {
		padding-top: 30rpx;

	}

	.recommond-f {
		padding-left: 50rpx;
		font-size: 30rpx;
	}

	.list {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.car-3 {
		display: flex;
		background-color: white;
		align-items: center;
		height: 100rpx;
		border-top: 4rpx #f8f8f8 solid;
	}

	.car-3-text {
		font-size: 25rpx;
		padding-left: 60rpx;
	}

	.btn {
		font-size: 30rpx;
		height: 70rpx;
		border-radius: 35rpx;
		line-height: 60rpx;
		background-color: white;
		border: #f8f8f8 solid;
		margin-left: 300rpx;
	}

	.car-com-1 {
		margin-top: 20rpx;
		margin-left: 20rpx;
		padding-left: 30rpx;
		width: 670rpx;
		height: 250rpx;
		border-radius: 7%;
		background-color: white;
	}

	.add {
		width: 100%;
		height: 120rpx;
		background-color: white;
		position: fixed;
		bottom:var(--window-bottom,0);
		z-index: 100;
	}

	.car-di {
		display: flex;
		justify-content: space-around;
		padding-top: 30rpx;
	}

	.all {
		width: 30rpx;
		height: 30rpx;
		border: #B2B9C1 6rpx solid;
		border-radius: 50%;
	}

	.all-1 {
		width: 30rpx;
		height: 30rpx;
		border: #B2B9C1 6rpx solid;
		border-radius: 50%;
		background-color: red;
	}

	.btn2 {
		margin-top: -10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 200rpx;
		height: 70rpx;
		background-color: red;
		color: white;
		border-radius: 100rpx;
	}
</style>